{extend name="base" /}
{block name="content"}
<div class="m-b-md">
    <h2 class="m-b-none">商品编辑</h2>
</div>
<section class="panel panel-default">
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" name="gname" class="form-control" value="{$oldData['gname']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" name="gnumber" value="{$oldData['gnumber']}" class="form-control">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="0" tid="-1">请选择</option>
                        {foreach name='cateData' item='v'}
                        <option value="{$v['cid']}" tid="{$v['tid']}" {if condition="$v['cid']==$oldData['cid']"}selected{/if}>{$v['_cname']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--异步回去规格和属性【商品详情页面的规格参数+下单选择颜色尺码】-->
            <script>
                $(function () {
                    var oldData=$('$attr').html.();
                    $('select[name=cid]').change(function () {
                        //:selected获取select选中的元素
                        var tid = $(':selected').attr('tid');
                        $('input[name=tid]').val(tid);
                        //顶级分类不能添加商品，顶级分类tid=0，这样在类型属性中查不到数据
                        if (tid == 0) {
                            alert('顶级分类不能添加商品');
                            $(this).val(0);
                            return false;
                        }
                        $.ajax({
                            url: "{:url('getAttr')}",
                            type: 'post',
                            data: {tid: tid},
                            dateType: 'json',
                            success: function (res) {
                                var attr = '';
                                var spec = '';
                                $.each(JSON.parse(res), function (k, v) {
                                    if (v.class == 2) {
                                        //说明是属性
                                        attr += '<tr><td>' + v.taname + '</td>';
                                        attr += '<td><select name="attr[' + v.taid + ']" ><option value="0">请选择</option>';
                                        $.each(v.tavalue, function (kk, vv) {
                                            attr += "<option value='" + vv + "'>" + vv + "</option>";
                                        })
                                        attr += '</select></td></tr>';
                                    } else {
                                        //说明是规格
                                        spec += '<tr><td>' + v.taname + '</td>';
                                        spec += '<td><select name="spec[' + v.taid + '][color][]"><option value="0">请选择</option>';
                                        $.each(v.tavalue, function (kk, vv) {
                                            spec += "<option value='" + vv + "'>" + vv + "</option>";
                                        })
                                        spec += '</select></td><td>附加价格</td>';
                                        spec += '<td><input type="text" name="spec[' + v.taid + '][added][]"></td>'
                                        spec += '<td><button type="button" class="btn btn-success btn-xs addSpec">追加</button></td></tr>';
                                    }
                                })
                                $('#attr').html(attr);
                                $('#spec').html(spec);
                            }
                        })
                    })
                })
            </script>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">
                        {foreach name='typeAttr' item='v'}
                        <tr>
                            <td>{$v['taname']}</td>
                            <td>
                                <select name="attr['+v.taid+']">
                                    <option value="0">请选择</option>
                                    {foreach name="v['tavalue']" item='vv'}
                                    <option value="{$v['taid']}" {if condition="in_array($vv,$checkAttr)"}selected{/if}>{$vv}</option>
                                    {/foreach}
                                </select>
                            </td>
                        </tr>
                        {/foreach}
                    </table>
                </div>
            </div>
            <!--点击添加规格按钮，追加一个-->
            <!--<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>-->
            <script>
                $(function () {
                    $('#spec').delegate('.addSpec', 'click', function () {
                        //1.复制当前tr一份
                        var tr = $(this).parents('tr').clone();
                        //3.将追加的按钮改成删除按钮
                        var del = '<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>';
                        tr.find('td').last().html(del);
                        //2.把复制的tr往后追加
                        $(this).parents('tr').after(tr);
                    })
                })
                $(function () {
                    $('#spec').delegate('.delSpec', 'click', function () {
                        $(this).parents('tr').remove();
                    })
                })
            </script>


            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                        {foreach name='specData' item='v'}
                        <tr>
                            <td>{$v['taname']}</td>
                            <td>
                                <select name="spec['+ v.taid+'][color][]">
                                    <option value="0">请选择</option>
                                    {foreach name="v['tavalue']" item='vv'}
                                    <option  {if condition="$v['gtvalue'] == $vv"}selected{/if}>{$vv}</option>
                                    {/foreach}
                                </select>
                            </td>
                            <td>
                                附加价格
                            </td>
                            <td>
                                <input type="text" name="spec['+ v.taid+'][added][]" value="{$v['added']}">
                            </td>
                            <td>
                                <button type="button" class="btn btn-success btn-xs addSpec">追加</button>
                            </td>
                        </tr>
                        {/foreach}
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option value="0">请选择</option>
                        {foreach name='brandData' item='v'}
                        <option value="{$v['bid']}" {if condition="$v['bid']==$oldData['bid']"}selected
                                {/if}>{$v['bname']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>


            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input type="text" name="unit" class="form-control" id="input-id-1" value="件">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" name="marketprice" class="form-control" value="{$oldData['market_price']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="shopprice" placeholder=""
                           value="{$oldData['shop_price']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="click" placeholder="" value="{$oldData['click']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="stock" placeholder="" value="{$oldData['stock']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <!--引入uploadify相关js、css-->
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control" name="pic" readonly="" value="{$oldData['pic']}">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <div class="input-group" style="margin-top:5px;">
                        <img src="{$oldData['pic']}" class="img-responsive img-thumbnail" width="150">
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                            onclick="removeImg(this)">×</em>
                    </div>
                </div>
                <script>
                    //上传图片
                    function upImage(obj) {
                        require(['util'], function (util) {
                            options = {
                                multiple: false,//是否允许多图上传
                                //data是向后台服务器提交的POST数据
                                data: {name: '后盾人', year: 2099},
                            };
                            util.image(function (images) {          //上传成功的图片，数组类型 
                                $("[name='pic']").val(images[0]);
                                $(".img-thumbnail").attr('src', images[0]);
                            }, options)
                        });
                    }

                    //移除图片
                    function removeImg(obj) {
                        $(obj).prev('img').attr('src', '__STATIC__/Admin/images/nopic.jpg');
                        $(obj).parent().prev().find('input').val('');
                    }
                </script>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <button onclick="upManyImage(this)" class="btn btn-default" type="button">选择图片</button>
                    <script>
                        //上传图片
                        function upManyImage(obj) {
                            require(['util'], function (util) {
                                options = {
                                    //上传多图
                                    multiple: true,
                                };
                                util.image(function (images) {
                                    $(images).each(function (k, v) {
                                        $("<img style='width:80px' src='" + v + "'/><input type='hidden' name='img[]' value='" + v + "'/>").appendTo('#box');
                                    })
                                }, options)
                            });
                        }
                    </script>
                </div>
                <style>
                    #box li {
                        float: left;
                        list-style: none;
                    }
                </style>
                <?php
                    $big = explode('|',$oldData['big']);
                ?>
                <div class="col-sm-8" id="box">
                    {foreach name="big" item="v"}
                    <li>
                        <img src="{$v}" alt="" style='width:80px'>
                        <input type="hidden" name="img[]" value="{$v}">
                        <a href="javascript:;" class='delManyImg'>X</a>
                    </li>
                    {/foreach}
                </div>
                <script>
                    $('#box').delegate('.delManyImg', 'click', function () {
                        $(this).parent().remove();
                    })
                </script>
                <div class="col-sm-8" id="box"></div>

            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea id="container1" name="pog"
                              style="height:300px;width:100%;">{$oldData['pog']}</textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container1', {hash: 2, data: 'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            })
                        });
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea id="container" name="service"
                              style="height:300px;width:100%;">{$oldData['service']}</textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        })
                    </script>
                </div>
            </div>
            <input class="hidden" type="hidden" name="tid" value="{$oldData['tid']}">
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
{/block}

;